*{
     margin: 0;
     padding: 0;
     list-style: none;
     text-decoration: none;
     box-sizing: border-box;
}

body{
     background-color: #e7f1ff;;
     font-size: 14px;
     letter-spacing: 1px;
    
}

.wrapper{
     width: 100%;
     display: flex;

     .sidebar{
         position: relative;
         .bg_shadow{
               position: fixed;
               left: 0;
               top: 0;
               background-color: #000;
               width: 100%;
               height: 100%;
               opacity: 0.3;
               visibility: hidden;
               transition: all .3s ease;
               z-index: 998;
         }
         .sidebar_inner{
               position: fixed;
               left: 0;
               top: 0;
               width: 250px;
               height: 100%;
               background-color: #9297d8;    
               z-index: 999;          
               .close{
                    position: absolute;
                    top: 5px;
                    right: 15px;
                    color: white;
                    font-size: 22px;
                    cursor: pointer;
                    display: none;
               }
               .profile_info{
                    margin-top: 10px;
                    margin-bottom: 10px;
                    .profile_img{
                         width: 120px;
                         margin: 0 auto;
                         margin-bottom: 5px;
                         img{
                              width: 100px;
                              height: 100px;
                              border-radius: 50%;
                         }
                    }
                    .profile_data{
                         text-align: center;
                         color: white;
                         .name{
                              font-size: 18px;   
                              margin-bottom: 5px;                          
                         }
                    }
                   
               }

               .sidebar_menu{
                    
                    height: 520px;
                    overflow: auto;                 
                    >li{
                         >a{
                              display: flex;
                              color: white;
                              padding: 10px 20px;
                              position: relative;
                              align-items: center;
                              .icon{
                                   font-size: 24px;
                                   margin-right: 10px;
                              }
                              .title{

                              }
                              .arrow{
                                   position: absolute;
                                   top: 18px;
                                   right: 20px;
                              }
                         }
                         .according{
                              background-color: #6f6fc7;
                              display: none;
                              // height: 0px;
                              // overflow: hidden;
                              >li{
                                   // border-bottom: 1px solid #ddd;
                                   >a{
                                        display: block;
                                        color: white;
                                        padding: 12px 0;
                                        padding-left: 60px;
                                   }

                                   &:hover >a,&.active >a{
                                        color: #999;
                                   }
                              }
                         }

                         &:hover,&.active{
                              background-color: #3d3d79;
                              
                              
                         }
                         &.active{
                              .according{
                                   display: block;
                              }
                              .arrow{
                                   transform: rotate(180deg);
                                   transition: all .3s ease;
                              }
                         }
                    }
               }

               .logout-btn{
                    position: absolute;
                    left: 0;
                    right: 0;
                    bottom: 20px;
                    a{
                         display: block;
                         color: white;
                         border: 1px solid #fff;
                         width: 200px;
                         text-align: center;
                         padding: 10px 20px;
                         margin: 0 auto;
                         border-radius: 5px;
                         &:hover{
                              background-color: white;
                              color: #555888;
                              
                         }
                    }
               }
         }

     }

     .main_container{
          margin-left: 250px;
          width: calc(100% - 250px);        
          .navbar{
               height: 50px;
               padding: 10px 20px;
               display: flex;
               align-items: center;
               box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
               .hamburger{
                    font-size: 24px;
                    margin-right: 15px;
                    color: #555888;
                    display: none;
                    @media (max-width : 1024px) {
                         display: block;
                    }
               }
               .logo a{
                    font-size: 16px;
                    color: black;
                    font-weight: bold;
               }
          }
          .content{
               padding: 20px;
               display: flex;
               flex-wrap: wrap;
               
               .item{
                    background-color: white;
                    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3),
                                   -2px -2px 4px rgba(0, 0, 0, 0.3);
                    margin: 10px 5px;
                    width: 31%;
                    padding: 20px;
               }
          }
     }
}

@media (max-width : 1024px) {
     .wrapper{         
          .sidebar{            
               .sidebar_inner{
                    left: -115%;
                    transition: all 0.5s ease;
                    &.active{
                         left: 0;
                    }
               }             
          }
          .main_container{
               margin-left:0px;
               width: 100%;
               transition: all 0.5s ease;
          }

          &.active{
               .sidebar{     
                    .bg_shadow{
                         visibility: visible;
                         opacity: 0.3;
                    }       
                    .sidebar_inner{
                        left: 0;
                    }             
               }
               .main_container{
                   
               }
     
          }
          
          
     }
     
     
}
